<template>
	<transition name="fade-transform" mode="out-in">
		<div v-if="!editPage" class="game-container report-container">
			<div class="params">
				<el-form ref="form" :inline="true" :model="queryData">
					<el-form-item label="变更时间:">
						<el-date-picker
							v-model="searchTime"
							size="medium"
							:picker-options="pickerShortcut2"
							format="yyyy-MM-dd HH:mm:ss"
							type="datetimerange"
							range-separator="-"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							align="right"
							:default-time="defaultTime"
						></el-date-picker>
					</el-form-item>
					<el-form-item label="状态:">
						<el-select
							v-model="queryData.status"
							size="medium"
							placeholder="默认选择全部"
							clearable
							style="width: 200px"
						>
							<el-option
								label="全部"
								:value="undefined"
							></el-option>
							<el-option
								v-for="item in entrAuthorityTypeArr"
								:key="item.code"
								:label="item.description"
								:value="item.code"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="创建人:">
						<el-input
							v-model="queryData.createdBy"
							v-symbols
							clearable
							size="medium"
							:maxlength="12"
							style="width: 200px"
							placeholder="请输入"
						></el-input>
					</el-form-item>
					<el-form-item label="ip:">
						<el-input
							v-model.trim="queryData.ip"
							clearable
							size="medium"
							:maxlength="15"
							style="width: 200px"
							placeholder="请输入"
						></el-input>
					</el-form-item>
					<el-form-item style="margin-left: 30px">
						<el-button
							type="primary"
							icon="el-icon-search"
							:disabled="loading"
							size="medium"
							@click="search"
						>
							查询
						</el-button>
						<el-button
							icon="el-icon-refresh-left"
							:disabled="loading"
							size="medium"
							@click="reset"
						>
							重置
						</el-button>
						<el-button
							v-if="hasPermission('405')"
							type="warning"
							icon="el-icon-folder"
							:disabled="loading"
							size="medium"
							class="fr"
							@click="openEdit('')"
						>
							创建
						</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div class="view-container dealer-container">
				<div class="content">
					<el-table
						v-loading="loading"
						element-loading-spinner="el-icon-loading"
						border
						size="mini"
						class="small-size-table"
						:data="dataList"
						style="width: 100%"
						:header-cell-style="getRowClass"
						highlight-current-row
					>
						<el-table-column
							prop="createdAt"
							align="center"
							label="创建时间"
						>
							<template slot-scope="scope">
								{{ scope.row.createdAt || '-' }}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							label="创建人"
							prop="createdBy"
						>
							<template slot-scope="scope">
								{{ scope.row.createdBy || '-' }}
							</template>
						</el-table-column>
						<el-table-column align="center" label="ip" prop="ip">
							<template slot-scope="scope">
								{{ scope.row.ip || '-' }}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							label="状态"
							prop="status"
						>
							<template slot-scope="scope">
								{{
									typeFilter(
										scope.row.status,
										'entrAuthorityType'
									) || '-'
								}}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							label="备注"
							prop="remark"
							min-width="150"
						>
							<template slot-scope="scope">
								{{ scope.row.remark || '-' }}
							</template>
						</el-table-column>
						<el-table-column
							v-if="hasPermission('407') || hasPermission('406')"
							align="center"
							label="操作"
							min-width="100"
						>
							<template slot-scope="scope">
								<el-button
									v-if="hasPermission('407')"
									type="danger"
									icon="el-icon-delete"
									size="medium"
									@click="dele(scope.row)"
								>
									删除
								</el-button>
								<el-button
									v-if="hasPermission('406')"
									type="warning"
									icon="el-icon-edit"
									size="medium"
									@click.stop="openEdit(scope.row)"
								>
									编辑
								</el-button>
							</template>
						</el-table-column>
					</el-table>
					<!-- 分页 -->
					<el-pagination
						v-show="!!total"
						:current-page.sync="pageNum"
						class="pageValue"
						background
						layout="total, sizes,prev, pager, next, jumper"
						:page-size="pageSize"
						:page-sizes="pageSizes"
						:total="total"
						@current-change="handleCurrentChange"
						@size-change="handleSizeChange"
					></el-pagination>
				</div>
			</div>
		</div>
		<editForm v-else :editRowData="editData" @back="back"></editForm>
	</transition>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
const end = dayjs()
	.endOf('day')
	.valueOf()
const start = dayjs()
	.startOf('day')
	.valueOf()
export default {
	components: {
		editForm: () => import('./components/editForm')
	},
	mixins: [list],
	data() {
		this.search = this.throttle(this.search, 1000)
		this.reset = this.throttle(this.reset, 1000)
		return {
			queryData: {
				status: undefined,
				createdBy: undefined,
				ip: undefined,
				sourceType: '0',
				type: '2'
			},
			searchTime: [start, end],
			dataList: [],
			editPage: false,
			editRowData: undefined
		}
	},
	computed: {
		entrAuthorityTypeArr() {
			return this.globalDics.entrAuthorityType || []
		}
	},
	methods: {
		loadData() {
			const [startTime, endTime] = this.searchTime || []
			let params = {
				...this.queryData,
				startTime: startTime
					? dayjs(startTime).format('YYYY-MM-DD HH:mm:ss')
					: undefined,
				endTime: endTime
					? dayjs(endTime).format('YYYY-MM-DD HH:mm:ss')
					: undefined
			}
			params = {
				...this.getParams(params)
			}
			delete params.time
			this.loading = true

			this.$api
				.queryBackEndIpConfigList(params)
				.then((res) => {
					this.loading = false
					if (res?.code === 200) {
						const { records, total } = res.data || {}
						this.dataList = Array.isArray(records)
							? Object.freeze(records)
							: []
						this.total = total || 0
					} else {
						this.$message({
							message: res?.msg || '接口请求异常',
							type: 'error'
						})
					}
				})
				.catch(() => {
					this.loading = false
				})
		},
		openEdit(val) {
			val ? (this.editData = val) : (this.editData = {})
			this.editPage = true
		},
		back() {
			this.editPage = false
			this.editData = {}
			this.loadData()
		},
		dele(rowData) {
			this.$confirm(
				`<strong>是否删除该条配置?</strong></br><span style='font-size:12px;color:#c1c1c1'>请谨慎操作</span>`,
				'确认提示',
				{
					dangerouslyUseHTMLString: true,
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}
			)
				.then(() => {
					this.$api
						.deleteBackEndIpConfig({ id: rowData.id })
						.then((res) => {
							this.loading = false
							if (res?.code === 200) {
								this.$message({
									message: '操作成功！',
									type: 'success'
								})
								this.loadData()
							} else {
								this.$message({
									message: res?.msg || '接口请求异常',
									type: 'error'
								})
							}
						})
				})
				.catch(() => {
					this.loading = false
				})
		},
		reset() {
			this.pageNum = 1
			this.queryData = {
				sourceType: '0',
				type: '2'
			}
			this.searchTime = [start, end]
			this.loadData()
		}
	}
}
</script>

<style lang="scss" scoped></style>
